<template>
    <div>
        <div class="list" v-for="(item,index) in list" :key="index">
            <div class="acceptance" @click="jumpAction(item.id,item.path,index)"
                 :class="{ButtonBackground:changeColor==index}">{{item.content}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'LeftButton',
  props: {
    title: {
      type: String,
      default: () => {
        return ''
      }
    },
    list: {
      type: Array,
      default: () => {
        return {
          list: []
        }
      }
    }
  },
  data () {
    return {
      changeColor: 0
    }
  },
  methods: {
    jumpAction (id, path, index) {
      console.log(index, '子组件index')
      if (path) {
        this.$router.push({
          path: path,
          params: {
            index: index
          }
        })
      } else {
        this.$emit('result', id)
      }
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="less">
    .acceptance {
        border: 3px #0166b6 solid;
        margin-top: 20px;
        font-weight: bolder;
        height: 70px;
        width: 300px;
        background-color: #0166b6;
        color: white;
        font-size: 20px;
        line-height: 70px;
        text-align: center;
    }

    .acceptance:hover {
        border: 3px #0166b6 solid;
        margin-top: 20px;
        font-weight: bolder;
        height: 70px;
        width: 300px;
        background-color: white;
        color: #0166b6;
        font-size: 20px;
        line-height: 70px;
        text-align: center;
        cursor: pointer;
    }

    .ButtonBackground {
        border: 3px #0166b6 solid;
        margin-top: 20px;
        font-weight: bolder;
        height: 70px;
        width: 300px;
        background-color: white;
        color: #0166b6;
        font-size: 20px;
        line-height: 70px;
        text-align: center;
        cursor: pointer;
    }
</style>
